<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理</title>
  <link rel="stylesheet" href="./assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
  <style>
    .search {
      width: 1000px;
      /* 将页面转为flex布局 */
      display: flex;
      /* 水平布局方式 */
      justify-content: space-between;
      /* 垂直布局方式 */
      align-items: center;
    }

    .search input {
      height: 40px;
      width: 400px;
      margin-right: 20px;
    }

    .opeartion {
      display: flex;
      justify-content: space-between;
    }

    .opeartion button {
      margin-right: 10px;
      width: 100px;
    }

    .table {
      margin-top: 20px;
    }

    .addForm div {
      display: flex;
      margin-bottom: 15px;
    }

    .addForm div label {
      display: inline-block;
      width: 70px;
    }
  </style>
</head>

<body>
  <div class="books">
    <!-- 面包屑部分 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item">图书管理</li>

      </ol>
    </nav>
    <!-- 水平线 -->
    <hr>
    <!-- 搜索部分开始 -->
    <div class="search">
      <!-- <p>图书搜索:</p> -->
      <div class="input-group ">
        <input type="text" class="form-control searchBookId" placeholder="请输入要修改的图书ID" aria-label="Username"
          aria-describedby="basic-addon1">
      </div>
      <div class="opeartion">
        <button type="button" class="btn btn-success searchBook">搜索</button>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">添加</button>
      </div>

    </div>
    <!-- 表格部分 -->
    <table class="table">
      <thead>
        <tr>
          <th scope="col">编号</th>
          <th scope="col">书名</th>
          <th scope="col">作者</th>
          <th scope="col">出版社</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">添加图书</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form action="#" class="addForm">
              <div class="bookname">
                <label for="#">书&nbsp;&nbsp;&nbsp;名:</label>
                <input type="text" class="form-control newBookName" placeholder="请输入书名">
              </div>
              <div>
                <label for="#">作&nbsp;&nbsp;&nbsp;者:</label>
                <input type="text" class="form-control newBookAuthor" placeholder="请输入作者">
              </div>
              <div>
                <label for="#">出版社:</label>
                <input type="text" class="form-control newBookPublisher" placeholder="请输入出版社">
              </div>

            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary addBook" data-bs-dismiss="modal">确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 修改图书的modal -->
  <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">修改图书</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="#" class="addForm">
            <div class="bookname">
              <label for="#">书&nbsp;&nbsp;&nbsp;名:</label>
              <input type="text" class="form-control updateBookName" placeholder="请输入书名">
            </div>
            <div>
              <label for="#">作&nbsp;&nbsp;&nbsp;者:</label>
              <input type="text" class="form-control updateBookAuthor" placeholder="请输入作者">
            </div>
            <div>
              <label for="#">出版社:</label>
              <input type="text" class="form-control updateBookPublisher" placeholder="请输入出版社">
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary saveUpdateBook" data-bs-dismiss="modal">确认</button>
        </div>
      </div>
    </div>
  </div>
  </div>
  <script src="./js/jquery-3.7.1.min.js"></script>
  <script src="./assets/bootstrap-5.3.8-dist/js/bootstrap.min.js"></script>
  <script>

    /* 
    获取图书列表
    API接口文档：https://s.apifox.cn/fa9274ac-362e-4905-806b-6135df6aa90e/api-24991093
    请求类型：GET
    请求地址:http://ajax-api.itheima.net/api/books
    请求参数:无
    */
    function getBookList() {
      $('tbody').children('tr').remove()
      $.get('http://ajax-api.itheima.net/api/books', data => {
        const bookList = data.data
        // console.log(bookList);
        bookList.forEach(item => {
          // console.log(item);
          let tr = $(`
            <tr>
            <td>${item.id}</td>  
            <td>${item.bookname}</td>  
            <td>${item.author}</td>  
            <td>${item.publisher}</td>  
            <td>
            <button type="button" class="btn btn-primary" onclick="updateBook(${item.id})" data-bs-toggle="modal" data-bs-target="#exampleModal2">修改</button>  
            <button type="button" class="btn btn-danger" onclick="deleteBook(${item.id})">删除</button>  
            </td>
            </tr>
            
            `)
          $('tbody').append(tr)

        })


      })

    }
    /* 
    删除图书功能
    请求类型：delete
    请求地址:http://ajax-api.itheima.net/api/books/{id}
    请求参数:路径参数
    */
    function deleteBook(id) {
      $.ajax({
        type: 'DELETE',
        url: `http://ajax-api.itheima.net/api/books/${id}`,
        success: () => {
          alert('删除成功')
          setTimeout(() => {
            getBookList()
          }, 500)

        }
      })


    }
    /* 
    根据ID查询图书
    请求类型:GET
    请求路径：http://ajax-api.itheima.net/api/books/{id}
    请求参数：查询图书的ID => 路径参数
    
    
    */
    $('.searchBook').click(function () {
      //alert('ts')
      let id = $('.searchBookId').val()
      console.log(id);
      if (!id) {
        getBookList()
      } else {
        $.ajax({
          type: 'get',
          url: `http://ajax-api.itheima.net/api/books/${id}`,
          success: data => {
            console.log(data);
            alert('图书查询成功')
            $('.searchBookId').val('')
            let bookInfo = data.data
            console.log(bookInfo);
            $('tbody').children('tr').remove()
            let tr = $(`
          <tr>
            <td>${bookInfo.id}</td>
            <td>${bookInfo.bookname}</td>
            <td>${bookInfo.author}</td>
            <td>${bookInfo.publisher}</td>
            <td>
              <button type="button" class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#exampleModal2" onclick="updateBook(${item.id})">修改</button>  
              <button type="button" class="btn btn-danger" onclick="deleteBook(${item.id})">删除</button>  
            </td>
            </tr>
        `)
            $('tbody').append(tr)
          },
          // error:err=>{
          //   console.log(err);
          // }
        })
      }
    })
    getBookList()


    // 添加图书
    $('.addBook').click(function () {
      let bookname = $('.newBookName').val()
      console.log(bookname);
      let author = $('.newBookAuthor').val()
      console.log(author);
      let publisher = $('.newBookPublisher').val()
      console.log(publisher);
      if (!(bookname && author && publisher)) {
        alert('请输入完整的图书信息')
      } else {
        let bookInfo = {
          bookname,
          author,
          publisher
        }
        $.ajax({
          type: 'post',
          url: 'http://ajax-api.itheima.net/api/books',
          data: bookInfo,
          success: data => {
            alert('添加成功')
            $('.newBookName').val('')
            $('.newBookAuthor').val('')
            $('.newBookPublisher').val('')
            getBookList()
          }
        })
      }
    })
    // 修改图书功能
    function updateBook(id) {
      $.get(`http://ajax-api.itheima.net/api/books/${id}`, data => {
        console.log(data);
        // updateBookName
        let bookInfo =data.data
        console.log(bookInfo);
        $('.updateBookName').val(bookInfo.bookname)
        // updateBookAuthor
        $('.updateBookAuthor').val(bookInfo.author)
        // updateBookPublisher
        $('.updateBookPublisher').val(bookInfo.publisher)
      })
    $('.saveUpdateBook').click(function () {
      let bookname =$('.updateBookName').val()
      let author =$('.updateBookAuthor').val()
      let publisher =$('.updateBookPublisher').val()
      if (!(bookname && author && publisher)) {
        alert('图书信息不能为空')
      }else{
        $.ajax({
          type:'put',
          url:`http://ajax-api.itheima.net/api/books/${id}`,
          data:{
            bookname,
            author,
            publisher
          },
          success:() =>{
            alert('图书修改成功')
            getBookList()
          }
        })
      }
    })
    }
    getBookList()
  </script>
</body>

</html>